
import Taro, {Component} from '@tarojs/taro'
import {View, Text, Image } from '@tarojs/components'
import {
  setStorage,
  navigateTo,
  phonePartOf,
  showToast, showModel, isPhone, navigateBack
} from "../../utils/common";

import {inject, observer} from '@tarojs/mobx'
import {IStoreProps} from '../../store/Stores'

import './address.scss'

import check from "../../assets/img/common/check.png";
import checked from "../../assets/img/common/checked.png";


interface IHomeProps extends IStoreProps {
}

@inject("stores")
@observer
class Address extends Component<IHomeProps> {
  constructor(props) {
    super(props)
  }

  state = {
    items: [] as any[]
  }

  componentWillMount() {
  }

  componentDidShow(): void {
    this.getItems()
  }

  getItems() {
    let { userStore } = this.props.stores
    userStore.getAddressList({
      callback: res => {
        this.setState({items: res.items})
      }
    })
  }

  link = (url: string = '/pages/index/index'): void => {
    navigateTo(url)
  }

  onDelete(id: string) {
    if(!id) { showToast('参数错误~'); return }
    showModel('删除地址', '你确定要删除地址吗?', '立即删除',() => {
      let { userStore } = this.props.stores
      userStore.removeAddress({
        id,
        callback: () => {
          this.getItems()
          showToast('删除成功!')
        }
      })
    })
  }

  edit = (item: object) => {
    setStorage('addressEditInfo', item)
    navigateTo('/pages/mine/addressAdd?id=' + item.id)
  }

  setDefault = (item: any) => {
    console.log(item)
    let { userStore } = this.props.stores
    userStore.saveAddress({
      input: {
        realName: item.realName,
        phoneNumber: item.phoneNumber,
        address: item.address,
        isDefault: true,
        id: item.id
      },
      callback: () => {
        showToast('操作成功~')
      }
    })
  }

  render() {
    let { items } = this.state
    return (
      <View className='page-bg content-20'>
        {
          items.length > 0 &&
            <View className='list-address'>
              {
                items.map(item => {
                  return(
                    <View className='list-address__item'>
                      <View className='list-address__title'>{item.realName} {phonePartOf(item.phoneNumber)}</View>
                      <View className='list-address__address'>{item.address}</View>
                      <View className='list-address__op'>
                        {!item.isDefault&& <Image className='list-address__icon' src={check} onClick={this.setDefault.bind(this, item.id)} />}
                        {!item.isDefault&& <View className='list-address__sw' onClick={this.setDefault.bind(this, item)}>设为默认地址</View>}
                        {item.isDefault&& <Image className='list-address__icon' src={checked} />}
                        {item.isDefault&& <View className='list-address__sw color-theme'>默认地址</View>}
                        <View className='list-address__r'>
                          <Text className='list-address__edit' onClick={this.edit.bind(this, item)}>编辑</Text>
                          <Text className='list-address__del' onClick={this.onDelete.bind(this, item.id)}>删除</Text>
                        </View>
                      </View>
                    </View>
                  )
                })
              }
            </View>
        }
        {
          items.length <= 0 &&
          <View className='none'>
             <Image className='none__icon' src={require('../../assets/img/common/none_address.png')} />
             <View className='none__desc desc'>你还没有添加地址哦！</View>
          </View>
        }
        <View className='footer-block' />
        <View className='page-submit' onClick={this.link.bind(this, '/pages/mine/addressAdd')}>+ 添加收货地址</View>
      </View>
    )
  }
}

export default Address

